<template>
  <div class="home">
    <!-- inline="true"表单一行显示 -->
    <el-form :inline="true" :model="searchMap" style="margin-top:20px">
      <el-form-item>
        <el-input v-model="searchMap.nickname" placeholder="管理员昵称" style="width:200px;margin:0 10px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchMap.username" placeholder="管理员账号" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData" style="margin:0 50px;" el-icon-zoom-out>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="dialogFormVisible = true"
          style="float:right;right:0px;"
          el-icon-plus
        >增加管理员</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" border style="width: 100%,height:100%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)" size="mini" el-icon-edit>查看</el-button>
          <el-button @click="handleDelete(scope.row.id)" type="danger" size="mini" el-icon-delete>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加会员的弹出窗口 -->
    <el-dialog
      title="管理员信息"
      :visible.sync="dialogFormVisible"
      width="400px"
      style="text-align:center"
    >
      <el-form
        :model="pojo"
        :rules="rules"
        ref="pojoForm"
        label-width="100px"
        label-position="right"
        style="width:300px"
      >
        <el-form-item label="昵称" prop="name">
          <el-input v-model="pojo.nickname"></el-input>
        </el-form-item>
        <el-form-item label="管理员账号" prop="username">
          <el-input v-model="pojo.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input v-model="pojo.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" style="float:left">取 消</el-button>
        <el-button type="primary" @click="addDate('pojoForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import administratorApi from "@/api/administrator";
export default {
  data() {
    return {
      list: [],
      searchMap: {
        //条件查询绑定的条件值
        nickname: "",
        username: ""
      },
      dialogFormVisible: false, //控制对话框
      pojo: {}, //提交的数据
      rules: {
        //校验规则
        nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },

  created() {
    this.fetchData();
  },

  methods: {
    fetchData() {
      administratorApi.list().then(response => {
        const res = response.data;
        this.list = res.data.list;
      });
    },
    handleEdit(id) {
      console.log(id);
    },
    //删除会员
    handleDelete(id) {
      console.log(id);
      this.$confirm("确认删除这条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          administratorApi.deleteById(id).then(response=>{
              const resp = response.data;
              if(resp.flag){
                  this.fetchData()
              }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addDate(pojoForm) {
      this.$refs[pojoForm].validate(valid => {
        if (valid) {
          console.log(pojoForm);
          administratorApi.add(this.pojo).then(response => {
            const resp = response.data;
            if (resp.flag) {
              this.fetchData();
              this.dialogFormVisible = false; //关闭窗口
            } else {
              this.$message({
                message: resp.message,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>